<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚美优品</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
    <script src="./js/goods_li.js"></script>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- register -->
    <div class="register">
        <div class="reg_all">
            <p>欢迎来到聚美优品！</p>
            <a href="./login.html">请登录</a>
            <a href="#">快速注册</a>
            <a href="#">正品保证</a>
            <a href="#">订单查询</a>
            <a href="#">♥收藏的品牌</a>
            <a href="#">我的聚美^</a>
            <a href="#" class="phone">📱手机聚美</a>
            <a href="#" class="more">更多</a>
        </div>
    </div>



    <!-- search -->
    <div class="search">
        <img src="./img/logo_new_v1.jpg" alt="">
        <div>
            <input type="text" id="input_import">
            <input type="button" value="搜索" id="input_scearh">
        </div>
        <ul>
            <li>
                <a href="#">面膜</a>
                <s>|</s>
            </li>
            <li><a href="#">保湿</a><s>|</s></li>
            <li><a href="#">保湿</a><s>|</s></li>
            <li><a href="#">洗面奶</a><s>|</s></li>
            <li><a href="#">补水</a><s>|</s></li>
            <li><a href="#">香水</a><s>|</s></li>
            <li><a href="#">眼霜</a><s>|</s></li>
            <li><a href="#">口红</a><s>|</s></li>
            <li><a href="#">护肤套装</a><s></s></li>
        </ul>
    </div>



    <!-- navigation -->
    <div class="navigation">
        <div>
            <ul>
                <li> <a href="#">首页</a> </li>
                <li> <a href="#">极速免税店</a> </li>
                <li> <a href="#">母婴特卖</a> </li>
                <li> <a href="#">美妆商城</a> </li>
                <li> <a href="#">国际轻奢</a> </li>
                <li> <a href="#">服饰运动</a> </li>
                <li> <a href="#">鞋包配饰</a> </li>
            </ul>
        </div>
        <div>
            <a href="#" class="span_01"><span></span></a>
            <a href="#" class="span_02"><span id="counts">8</span></a>
        </div>
    </div>



    <!-- commodities -->
    <div class="commodity">
        <ul>
            <li style="background: url(http://p0.jmstatic.com/banner/3477/234242_1920_350_002-web.jpg)">
                <a href="#"></a>
            </li>
        </ul>
    </div>



    <!-- store information -->
    <div class="store_information">
        <div>
            <ul>
                <li class="li_01">今日疯抢</li>
                <li class="li_02">明日预告</li>
            </ul>
        </div>
        <a href="#">
            <img src="http://p0.jmstatic.com//jmstore/image/000/009/9012_std/5dafb7bf9da44_535_212.jpg?1571901431">
        </a>
        <a href="#">
            <img src="http://p0.jmstatic.com//jmstore/image/000/007/7261_std/5db14b0866a16_535_212.jpg?1571900502">
        </a>
        <a href="#">
            <img src="http://p0.jmstatic.com//jmstore/image/000/008/8283_std/5db958f68d614_535_212.jpg?1572429351">
        </a>
        <a href="#">
            <img src="http://p0.jmstatic.com//jmstore/image/000/007/7959_std/5db9a60b2f940_535_212.jpg?1572447776">
        </a>
    </div>



    <div class="day_store">
        <div>
            <h2></h2>
            <h3></h3>
        </div>
        <div class="home_goods_list">
            <ul>
            </ul>
        </div>
    </div>



    <!-- footer -->
    <div class="footer">
        <div>哈哈哈哈哈哈哈哈哈哈哈哈啊哈</div>
    </div>
</body>

</html>
<script>
    var res_data = [{
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "【99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 49,
        "goods_counts": 1,
    },
    {
        "goods_img": "./img/4934114_dx_1000_400.jpg",
        "goods_name": "【99元选3件】日本•花印清新净颜卸妆水",
        "goods_style": "【型号】容量：380ml",
        "goods_prise": 49,
        "goods_counts": 2,
    }
    ]
    let totle = 0
    res_data.forEach(e => {
        totle += e.goods_counts
    })
    document.querySelector("#counts").innerText = totle


</script>
<!-- <script>
    axios({
        method: 'get',
        url: './json/home_goods_list.json'
    }).then(res => {
        if (res.data.code === 20000) {
            var goods_list = res.data.data
            var goods_box = document.querySelector('.home_goods_list').children[0]
            goods_list.forEach(e => {
                var item = document.createElement('li');
                var img_box = document.createElement('div')
                var img_link = document.createElement('a')
                var img = document.createElement('img')
                var goods_name = document.createElement('p')
                var goods_price = document.createElement('p')
                img_link.append(img)
                img_box.append(img_link)
                img_box.className = "img_box"
                img.src = e.goods_url
                img_link.href = "#"
                goods_name.innerText = e.goods_name
                goods_price.innerText = "￥" + e.goods_price
                goods_price.className = "mm"

                item.append(img_box)
                item.append(goods_name)
                item.append(goods_price)

                if (e.icon_url) {
                    var icon_span = document.createElement('span')
                    var icon = document.createElement('img')
                    icon_span.className = "span_01"
                    icon.src = e.icon_url
                    icon_span.append(icon)
                    item.append(icon_span)
                }


                goods_box.append(item)

                console.log(goods_box)

            });


        }
    })


</script> -->